Esther Thorvalds's profile

StoryStory App (Google UX Certificate)

Story App for Kids

Case study

This is a case study for a new story app for kids and adults interested in easy-to-read interactive stories. 

ONGOING
Project vision
StoryStory is a reading app for low-reading level users who enjoy reading and/or listening to simple stories. I used a goal directed design methods presented in the Google UX Online Certificate program. The product was designed as a mobile based application rather than a web-based one to showcase my mobile design skillset.


Challenges
1. Provide a entertaining and seamless reading experience.
2. Create a lively UI while keeping the stories as the focus.
3. Design a cohesive interface for familiar and unfamiliar users.
User Personas
End-user: Children age 3-12
I created four user personas after conducting and online survey for children who were possible users of the app. The personas include kids of foreign origin as well as kids with disabilities. 
User Stories
Using the user personas I created, I continued on to create user stories to better identify the benefit that the user would gain from the story app.
Empathy Map

(texti um þessi empathy maps)
User Journey

(texti um þessi user journeys)
Problem Statement

I created a problem statement for Heiða using who, what, where, why and how.
Value Propositions

(fyrst brainstorm, svo tekið út það sem hafði ekki mikil not fyrir notandann, svo parað saman við personas)
COMPETITOR AUDIT

Conducting research on our competitors was the cornerstone to understanding our product, the landscape of our industry, and our users. Here is a completed competitive audit where all of our research was compiled into one central resource.
Crazy 8s exercise

(um crazy 8s og hvernig þessi æfing bjó til hugmyndina um köttinn - o.fl.?)
Goal Statement

(um þessi goal statements)
User flow

First version:
Second version:
(LÍMA INN ÚR FIGJAM)
STORYBOARDS
A tool for ideation that helps you outline an ideal flow for your design. In UX, a storyboard is a series of panels or  frames that visually describe and explore a user's experience with a product. Storyboarding as a tool to visualize potential solutions to problems the user is facing. It shows the transition from the problem the user is facing to coming up with ideas for solutions we can provide with good user experience design.
Low Fidelity Wireframes

(teiknað fríhendis í procreate o.fl.)
End result of lo-fi wireframe
Process repeated with all other frames in the app.

SETJA INN REST EÐA HAFA BARA ÞAÐ BESTA??
Lo-fi paper prototyping.

(um paper prototyping - setja yfirlitsmynd af aðstöðu??)
Usability Study

During this usability study, researcher followed participants as they interact with the product. The user's feedback helped the design team make important improvements to the user experience. Usability studies can take place at various points in the design process. This is a case of concept testing where users tested a lo-fi prototype which was only somewhat interactive.

Prior to the usability study, I created a UX Research Study plan which included an introduction, research questions (what design questions the study should help answer), key performance indicators, methodology, participants, and a script.
VANTAR DIGITAL WIREFRAMES MYND HÉR
Test Notes
Affinity Diagram
Patterns and Themes

It was observed that 3 out of 5 participants found it easy to select the easy version of a story, but two found the wording confusing. That means the text could be improved when user selects the level of difficulty

2 out of 5 participants did not realize the story had started. This means some users ​​​​​​​would like a message to prepare them before starting to read.

3 out of 5 participants were confused by the player at the bottom. It was non-functional in the lo-fi prototype but there is the question of whether it is needed at all as the majority was confused by it.

3 out of 5 participants liked the story process. As a majority of participants liked the "choose your own" type of story, it would be advised to continue using this type of narrative for other stories as well.

5 out of 5 participants found it easy to select English as a language. As a majority of users found it easy to select a language in settings, the rest of the settings should be designed in a similar way.
Insights from Data

Strong insights are grounded in real data, answer the research questions, are easy to understand, increase empathy for the user experience and inspire direct action.

1. Based on the theme that: most users found the wording confusing when selecting easy or hard, an insight is: use accessible language and phrases that fit the title of the page so the user better understands the cues for what steps they need to take.

2. Based on the theme that: some users did not realize the story had already started, an insight is: create a message that prepares the user before the story starts.

3. Based on the theme that: most users were confused by the player at the bottom, an insight is: reevaluate whether the player is needed at all, and if so, if there would be a better place, function and design for it.

4. Based on the theme that: the majority of users like the story process of a “choose your own” narrative, an insight is: consider making more stories in a similar style.

5. Based on the theme that: the majority of users found it easy to select English as a language, an insight is: use the design for the language settings for other pages under settings.
Visual Design
Color Palette and Color Styles
Working on the payment process mockup while considering Gestalt principles and visual design principles like emphasis, hierarchy, scale and proportion, unity and variety.

First draft of a sticker sheet with components, typography and color.
Starting to flow ...
Second Research Starts
Now with a high fidelity prototype.
Insights from Data - Round 2!

Priority 0

Based on the theme that: most users found it hard to tap the non-emphasized links at the bottom of the screens, an insight is: make the text size for the non-emphasized links more visible and easy to tap.

Based on the theme that: some users thought the story rating system looked like one picture but not two separate thumbs, an insight is: make it clearer that the user can click either thumbs up or thumbs down.

Based on the theme that: some users found the menu overlay on the story screens distracting, an insight is: consider designing a menu overlay that blends better and be mindful of contrast.

Priority 1

Based on the theme that: a user found it difficult to navigate through the payment process because they did not own a credit card, an insight is: consider adding more payment options.

Priority 2

Based on the theme that: some users found the wording confusing when finishing opening the parental lock, an insight is: use phrases so the user better understands the cues for what steps they need to take.

Based on the theme that: some users wanted the story to have more structure and be mindful of the tense, an insight is: consider keeping the same structure throughout the entire story.

StoryStory App (Google UX Certificate)
Published:

StoryStory App (Google UX Certificate)

Published: